<template>
    <div class="search">
    <Col>
        <Card>

            <Row>
                <Form  ref="searchForm" :model="searchForm" inline :label-width="80" class="search-form">
                    <Form-item label="标签名称" style="font-weight: 600 " prop="labelName">
                        <Input type="text" v-model="searchForm.labelName" clearable placeholder="请输入标签名称"
                               style="width: 200px"/>
                    </Form-item>
                    <Form-item style="margin-left:-35px;" class="br">
                        <Button @click="handleSearch" type="primary" icon="ios-search">查询</Button>
                        <Button @click="handleReset" type="primary" icon="ios-trash">清空</Button>
                    </Form-item>
                </Form>
            </Row>
            <Row>
                <Alert show-icon>
                    已选择 <span class="select-count">{{selectCount}}</span> 项
                    <a class="select-clear" @click="clearSelectAllInfo">清空</a>
                </Alert>
            </Row>
            <Row>
                <Table :loading="load" border :columns="columns" :data="data" height="350"
                       @on-sort-change="changeSort"   @on-selection-change="showSelect"   ref="table" >
                    <template slot-scope="{ row, index }" slot="labelType">
                        <span>{{setLabelTypeTitle(row.labelType)}}</span>
                    </template>
                </Table>
            </Row>
            <div style="margin-left: 350px;margin-top: 12px">
                <Button size="small" type="primary"  @click="cancel" icon="ios-backspace">取消</Button>
                <Button type="primary" size="small" icon="md-bookmark" @click="labelSubmit">保存</Button>
            </div>
        </Card>
    </Col>

    </div>
</template>
<script>
    import {
        queryAllLabelListForManual
    } from "@/projects/afs-core-business/api/afs-case/manual-label/manualLabel";

    //保存标签信息
    import {
        addApproveLabel
    } from "@/projects/afs-core-business/api/afs-case/make-label/makeLabel";

    //根据申请编号获取标签
    import {
        queryLabelByApplyNo
    } from "@/projects/afs-core-business/api/afs-case/make-label/makeLabel";

    import {
        getDictDataByType
    } from "_p/basic/api/admin/datadic";

    export default {
        name: "make-label",
        props:{
            appno:{
               type:String
            }
        },
        data() {
            return {
                load:true,
                selectDate: null,
                selectCount: 0,
                modalType: 0,
                errorPass: "",
                apply_no:this.appno,
                labelTypeList:[],
                searchForm: {
                    labelName:""
                },
                columns: [
                    {
                        type: "selection",
                        minWidth: 60,
                        maxWidth:60,
                        align: "center",
                        fixed: "left"

                    },
                    {
                        title: "标签名称",
                        align: "center",
                        width: 150,
                        key: "labelName"
                    },
                    {
                        title: "标签编号",
                        key: "labelNo",
                        width: 150,
                        type:'text',
                        align: "center"
                    },
                    {
                        title: "标签排序",
                        key: "labelSort",
                        width: 150,
                        align: "center",
                        type: "text"
                    },

                ],
                data: [],
                total: 0
            };
        },
        methods: {
            init() {
                this.searchForm.pageNumberTag = 1;
                this.searchForm.pageSizeTag = 50;
                this.initLabelType();
            },
            getSelectLabel(labelList){
                this.queryData(labelList);
            },
            //加载的同时带出已有标签
            queryData(labelList) {
                this.load= true;
                this.searchForm.label='manual';
                this.searchForm.status='takeEffect';
                queryAllLabelListForManual(this.searchForm).then(res => {
                    this.load = false;
                    if (res.code === "0000") {
                        let temp =  res.data.records;
                        var i = 0;
                        temp.forEach(info =>{
                            labelList.forEach(item => {
                                if(item.labelId==info.id){
                                    temp[i]._checked=true;
                                }
                            });
                            i++;
                        });
                        this.data = temp;
                        this.total = res.data.total;
                    }
                });
            },
            //重新加载
            queryDataAgain() {
                this.load= true;
                this.searchForm.label='manual';
                this.searchForm.status='takeEffect';
                queryAllLabelListForManual(this.searchForm).then(res => {
                    this.load = false;
                    if (res.code === "0000") {
                        this.data = res.data.records;
                        this.total = res.data.total;
                    }
                });
            },
            initLabelType(){
                let params = {
                    type: "confTagType"
                };
                getDictDataByType(params.type).then(res =>{
                    if (res.code === "0000"){
                        this.labelTypeList = res.data;
                    }
                });
            },
            setLabelTypeTitle(val){
                let dic = {};
                this.labelTypeList.forEach(column => {
                    if(column.value === val){
                        dic = column;
                    }
                });
                return dic.title;
            },
            showSelect(e) {
                this.selectList = e;
                this.selectCount = e.length;
            },
            clearSelectAllInfo() {
                this.$refs.table.selectAll(false);
            },
            changeSort(e) {
                this.searchForm.sort = e.key;
                this.searchForm.order = e.order;
                if (e.order === "normal") {
                    this.searchForm.order = "";
                }
            },
            handleSearch() {
                this.searchForm.pageNumberTag = 1;
                this.searchForm.pageSizeTag = 100;
                // 重新加载数据
                this.queryDataAgain();
            },
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.searchForm.pageNumberTag = 1;
                this.searchForm.pageSizeTag = 100;
                this.selectDate = null;
                // 重新加载数据
                this.queryDataAgain();
            },
            cancel(){
                this.$emit("cancel")
            },
            //标签保存（同时删除已有数据）
            labelSubmit() {
                this.$refs.searchForm.validate(valid => {
                    if (valid) {
                      /*  if (this.selectCount <= 0 || this.selectCount == undefined) {
                            this.$Message.warning("您还未选择数据");
                            return;
                        }*/
                        var params = [];
                        let ids = [];
                        this.selectList.forEach((e) => {
                            ids += e.id+"," ;
                        });
                        params.push(this.appno,ids)
                        addApproveLabel(params)
                            .then(res => {
                                if (res.code === "0000") {
                                    this.$Message.success("操作成功");
                                    this.cancel();
                                }
                            }).catch(() => {
                                this.queryDataAgain();
                            });
                    }

                });
            },
        },
        mounted() {
            this.init();
        }
    };
</script>
